<template>
	<view class="kmDoc-container">
		
		<scroll-view scroll-y @scrolltolower="getKmDocList" class="scroll" :scroll-top="scrollValue">
		   <view class="kmDoc-box" v-for="(item,index) in kmDocList" :key="index">
				<view class="aaa">
					<view class="box-head">
						<span>{{item.title}}</span>
						<uni-icons custom-prefix="iconfont" :type="item.icon" :color="item.iconcolor" size="15"></uni-icons>
					</view>
					
					<view class="box-content">
						<view class="content">
							{{item.content}}
						</view>
					</view>
				</view>
				<view class="qqq">
					<span class="bbb">{{item.date}}</span>
				</view>
			</view>
		    <u-loadmore :status="status" />
		</scroll-view>
	</view>
</template>

<script>
	import * as API from '@/common/api';
	export default {
		name: "pages-home-kmDoc",
		data() {
			return {
				scrollValue: 0,
				oldScrollValue: 0,
				status: 'loadmore',
				kmDocList: [],
				params: {
				    searchValue: undefined,
				    pageNum: 1,
				    pageSize: 10,
				},
			}
		},
		methods: {
			getInitKmDocList() {
			    this.params.pageNum = 1;
			    this.status = 'loadmore';
			    this.kmDocList=[];
			    this.getKmDocList();
			},
			async getKmDocList() {
			    if(this.status!='nomore')
			    {
			        this.status = 'loading';
			        const res = await API.listKmDoc({
			            params: this.params
			        });
			        this.kmDocList = this.kmDocList.concat(res.rows);
			        this.params.pageNum += 1;
			        if (res.total <= this.params.pageNum * this.params.pageSize) {
			            this.status = 'nomore';
			        } else {
			            this.status = 'loadmore';
			            
			        }
			    }
			}
		},
		
	}
</script>

<style lang="less">
	.kmDoc-container {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.kmDoc-box {
			width: 90%;
			height: 130px;
			margin-bottom: 10px;
			// background-color: #ffffff;
			// background: url('../../static/icons/card-bg.png') 100% no-repeat;
			position: relative;
			
			.aaa{
				width: 100%;
				height: 100%;
				background: url('../../static/icons/card-bg.png') 100% no-repeat;
				z-index: 2;
				position: absolute;
				
				.box-head {
					height: 35%;
					width: 100%;
					display: flex;
					align-items: center;
					// position: relative;

					& span:nth-of-type(1) {
						font-weight: bold;
						font-size: 14px;
						margin-left: 5%;
					}
					
					image {
						width: 11px;
						height: 13px;
						margin-left: 5px;
						margin-top: 2px;
					}
				}
				
				
				.box-content {
					height: 65%;
					width: 100%;
					font-size: 12px;
					color: #8C8C8C;
					display: flex;
					justify-content: center;
					.content {
						height: 80%;
						width: 90%;
					}
				}
			}
			
			.qqq {
				font-size: 14px;
				background: url('../../static/icons/date-bg.png') 100% no-repeat;
				color: #4091D7;
				position: absolute;
				right: 4%;
				top: 5%;
				height: 25%;
				width: 40%;
				z-index: 1;
				.bbb{
					margin-left: 35%;
					line-height: 28px;
				}
			}
		}
	}
	

</style>
